<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            width="100%"
            label-width="80px"
            v-if="false"
        >
            <el-row>
                <el-col :span="6">
                    <el-form-item label="部门" prop="parentId" style="height: 36px;">
                        <treeselect
                            v-model="queryParams.deptId"
                            :options="deptOptions"
                            :show-count="true"
                            @select="serviceClazzChenge"
                            placeholder="请输入服务名称"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item style="margin-left: -30px">
                        <el-button
                            type="cyan"
                            icon="el-icon-search"
                            size="mini"
                            @click="GetDataList"
                            >搜索</el-button
                        >
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="resetQuery"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table
            :data="datalist"
            ref="refTable"
            style="width: 100%;"
        >
            <el-table-column
                label="月份"
                align="center"
                prop="endTime"
            />
            <el-table-column
                label="工单数"
                align="center"
                prop="workOrderCount"
            />
            <el-table-column
                label="申请配置"
                align="center"
            >
                <el-table-column
                    label="cpu"
                    align="center"
                >
                    <el-table-column
                        align="center"
                        label="用量(核·月)"
                        prop="applyCpuNum"
                    />
                </el-table-column>
                <el-table-column
                    label="内存"
                    align="center"
                >
                    <el-table-column
                        align="center"
                        label="用量(GB·月)"
                        prop="applyMemorySize"
                    />
                </el-table-column>
            </el-table-column>
            <el-table-column
                label="上云配置"
                align="center"
            >
                <el-table-column
                    label="cpu"
                    align="center"
                >
                    <el-table-column
                        align="center"
                        label="用量(核·月)"
                        prop="upCpuNum"
                    />
                </el-table-column>
                <el-table-column
                    label="内存"
                    align="center"
                >
                    <el-table-column
                        align="center"
                        label="用量(GB·月)"
                        prop="upMemorySize"
                    />
                </el-table-column>
            </el-table-column>
            <el-table-column
                label="申请总价预估(年)"
                align="center"
                prop="applyTotalPriceByYear"
            />
            <el-table-column
                label="上云总价预估(年)"
                align="center"
                prop="upTotalPriceByYear"
            />
        </el-table>
    </div>
</template>
<script>
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getWorkOrderListByMonth } from "@/api/reportForm/charging";
export default {
    components: { Treeselect },
    name: "DifferentSpecifications",
    data(){
        return{
            // 部门列表
            deptOptions: [],
            // 查询字段
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deptId : null
            },
            datalist : []
        }
    },
    created(){
        treeselect().then((res) => {
            this.deptOptions = res.data;
        })
        this.GetDataList()
    },
    methods:{
        /** 转换部门数据结构 */
        serviceClazzChenge(row) {
            this.queryParams.deptId = row.id
        },
        GetDataList(){
            getWorkOrderListByMonth(this.queryParams).then(res=>{
                this.datalist = res.rows
                this.total = res.total
            })
        },
        resetQuery(){
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                deptId : null
            }
        }
    }
}
</script>